<template>
  <div>
    <Header></Header>
    <Navbar v-show="hive == '/content/2级路由'"></Navbar>
    <!-- 导航栏 -->
    <div @click="a" v-show="route" class="nav">
      <div @click ="$router.push('/home/index')">
        <span class="active" >首页</span>
        <i class="border"></i>
      </div>
      <div @click ="$router.push('/home/vocal')">
        <span >演唱会</span>
        <i class="border"></i>
      </div>
      <div>
        <span >音乐会</span>
        <i class="border"></i>
      </div>
      <div>
        <span >Live</span>
        <i class="border"></i>
      </div>
      <div>
        <span >儿童亲子</span>
        <i class="border"></i>
      </div>
      <div>
        <span >展览市集</span>
        <i class="border"></i>
      </div>
      <div>
        <span >舞蹈芭蕾</span>
        <i class="border"></i>
      </div>
      <div>
        <span >曲艺杂谈</span>
        <i class="border"></i>
      </div>
      <div>
        <span >话剧歌剧</span>
        <i class="border"></i>
      </div>
      <div>
        <span >体育赛事</span>
        <i class="border"></i>
      </div>
    </div>
    <router-view />
    <Footer></Footer>

  </div>
</template> 

<script>

import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import Navbar from '@/components/Navbar.vue';

export default {
  name: 'HomeView',
  components: { Header, Footer, Navbar },
  data() {
    return {
      route: true,
      hive: false
    }
  },
  methods: {
    a() {
      console.log(this.$route)
      let r = this.$route.path
      let index = r.indexOf("/home")
      this.hive = r
      console.log(index)
      if (index == -1) {
        this.route = false
      } else {
        this.route = true
      }

    },
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding-top: 50px;
  padding: 20px 0;
  justify-content: space-between;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    >span {
      text-decoration: none;
      color: #323038;
      font-size: 20px;
      margin-bottom: 2px;

      &:hover {
        color: #f8625b;
      }

      &.active {
        font-size: 30px;
        position: relative;
        top: -3px;
      }
    }

    .border {
      width: 20px;
      margin-top: 2px;
      border: 3px solid transparent;
    }

    >span.active+.border {
      border: 2px solid #ff4655;
      border-radius: 2px;
    }
  }
}
</style>
